<template>
	<el-dialog class="abow-dialog" :visible.sync="visible" top="2vh"
		:title="!dataId ? '添加配置模板' : '编辑配置模板'" :close-on-click-modal="false"
		:close-on-press-escape="false" width="680px" @close="closeFn">
		<el-form class="form" :model="dataForm" :rules="dataRule" ref="dataForm" label-width="120px" size="medium" :inline="false"
			labelSuffix="：">
			<el-form-item prop="spread_platform_id" label="投放平台">
				<el-select clearable v-model="dataForm.spread_platform_id" placeholder="请选择" @focus="getPlatformFn">
					<el-option v-for="(item,index) in platformId" :key="index" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="name" label="模板名称">
				<el-input clearable v-model="dataForm.name" placeholder="模板名称" />
			</el-form-item>
			<el-form-item prop="applet_id" label="选择小程序">
				<el-select clearable :disabled="dataId ? true : false " v-model="dataForm.applet_id" placeholder="请选择" @focus="getAppletFn" @change="changeAppletFn">
					<el-option v-for="(item,index) in appletList" :key="index" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item v-if="Applettype==2" prop="operation_mode" label="模式">
				<el-radio-group v-model="dataForm.operation_mode" :disabled="dataId ? true : false " @change="changeOperationFn">
					<el-radio :label="1">付费模式</el-radio>
				    <el-radio :label="2">IAA模式</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item v-if=" Applettype==2 && dataForm.operation_mode==2" prop="ipu_qualify" label="首日广告展示数">
				<el-input type="number" clearable v-model="dataForm.ipu_qualify" placeholder="IAA首日广告展示达标数" />
			</el-form-item>
			<el-form-item v-if=" Applettype==2 && dataForm.operation_mode==2" prop="arpu_num" label="首日广告金额">
				<el-input type="number" clearable v-model="dataForm.arpu_num" placeholder="IAA首日广告达金额" />
			</el-form-item>

			<el-form-item v-if="dataForm.operation_mode!=2" prop="backhaul_dimension" label="计划维度回传">
				<el-radio-group v-model="dataForm.backhaul_dimension">
					<el-radio :label="1">计划维度回传</el-radio>
				    <el-radio :label="2">推广链接回传</el-radio>
				</el-radio-group>
			</el-form-item>
			<!-- <el-form-item prop="ad_type" label="广告类型">
				<el-radio-group v-model="dataForm.ad_type">
					<el-radio :label="1">事件管理</el-radio>
				    <el-radio :label="2">转化跟踪</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item prop="report_method" label="上报方式">
				<el-radio-group v-model="dataForm.report_method">
					<el-radio :label="1">ip+ua</el-radio>
				    <el-radio :label="2">小程序资产化</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item prop="user_activation_report" label="用户激活上报">
				<el-radio-group v-model="dataForm.user_activation_report">
					<el-radio :label="1">不上报</el-radio>
				    <el-radio :label="2">按染色行为上报</el-radio>
				</el-radio-group>
			</el-form-item> -->
			<el-form-item v-if="dataForm.operation_mode!=2" prop="report_type" label="上报类型">
				<el-radio-group v-model="dataForm.report_type">
					<el-radio :label="1">自定义上报</el-radio>
				    <el-radio :label="2">全量上报</el-radio>
				</el-radio-group>
			</el-form-item>
			<template v-if="dataForm.report_type==1">
				<el-form-item v-if="dataForm.operation_mode!=2" prop="backhaul_type" label="回传配置">
					<el-radio-group v-model="dataForm.backhaul_type">
						<el-radio class="mb-10" :label="1">回传用户在关注后24小时内的所有首充</el-radio>
					    <el-radio class="mb-10" :label="2">回传用户在关注当天自然日的所有首充</el-radio>
						<el-radio class="mb-10" :label="3">回传用户在关注后24小时内的所有充值</el-radio>
						<el-radio :label="4">回传用户在关注当天自然日的所有充值</el-radio>
					</el-radio-group>
				</el-form-item>
				<!-- <el-form-item prop="order_property" label="订单属性">
					<el-radio-group v-model="dataForm.order_property">
						<el-radio :label="1">首冲订单</el-radio>
					    <el-radio :label="2">全部订单</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item prop="order_pay_type" label="订单支付时间">
					<el-radio-group v-model="dataForm.order_pay_type">
						<el-radio :label="1">成功染色当天（自然日）</el-radio>
					    <el-radio :label="2">成功染色后24小时内</el-radio>
					</el-radio-group>
				</el-form-item> -->
				<el-form-item v-if="dataForm.operation_mode!=2" prop="minimun_report_amount" label="最低上报金额">
					<el-input class="" v-model="dataForm.minimun_report_amount" placeholder="请输入"
						clearable>
						<template slot="append">元</template>
					</el-input>
				</el-form-item>
				<el-form-item class="mb-2" prop="backhaul_filterate_num" label="回传过滤">
					<div class="d-flex flex-column">
						<div class="d-flex flex-row">
							<el-form-item prop="backhaul_filterate_num" label="">
								<el-input class="" v-model="dataForm.backhaul_filterate_num" placeholder="请输入"
									clearable>
									<template slot="prepend">每</template>
									<template slot="append">单</template>
								</el-input>
							</el-form-item>
							<div style="width: 5px;"></div>
							<el-form-item prop="backhaul_filterate_miss" label="">
								<el-input class="" v-model="dataForm.backhaul_filterate_miss" placeholder="请输入"
									clearable>
									<template slot="prepend">扣</template>
									<template slot="append">单</template>
								</el-input>
							</el-form-item>
						</div>
						<div class="d-flex" style="color: #ed143d;">{{'回传'+(dataForm.backhaul_filterate_num||0)+'单，'+'后'+(dataForm.backhaul_filterate_miss||0)+'单不回传'}}</div>
					</div>
				</el-form-item>
			</template>
			<el-form-item v-if="dataForm.operation_mode!=2" prop="start_protect" label="启动保护">
				<el-input class="" v-model="dataForm.start_protect" placeholder="请输入"
					clearable>
					<template slot="prepend">前</template>
					<template slot="append">单必回传</template>
				</el-input>
			</el-form-item>
		</el-form>
		<template slot="footer">
			<el-button @click="visible = false">{{ $t('views.public.cancel') }}</el-button>
			<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('views.public.confirm') }}</el-button>
		</template>
	</el-dialog>
</template>

<script>
	import {
		debounce
	} from 'lodash'
	import {
		isEmail,
		isMobile
	} from '@/libs/validate'
	import schema from 'async-validator'
	export default {
		data() {
			return {
				dataId:null,
				platformId:[],
				companyName:[],
				appletList:[],
				playletList:[],
				allEpisodeList:[],
				templeteList:[],
				visible: false,
				deptList: [],
				deptListVisible: false,
				fullscreenLoading: false,
				roleList: [],
				roleIdListDefault: [],
				Applettype:1,
				dataForm: {
					spread_platform_id:'',//投放平台id
					name: '', //模板名称	
					applet_id:'',//小程序id
					ad_type:1,//广告类型
					report_method:1,//上报方式
					user_activation_report:1,//用户激活上报
					report_type:1,//上报类型
					backhaul_type:1,//回传配置
					backhaul_dimension:1,//
					// order_property:1,//订单属性
					// order_pay_type:1,//订单支付时间
					operation_mode:1,
					minimun_report_amount:'',//最低上报金额
					backhaul_filterate_num:'',//回传过滤 第几单
					backhaul_filterate_miss:'',//回传过滤 扣几单
					start_protect:'',//启动保护
					ipu_qualify:'',
					arpu_num:''
				}
			}
		},
		created() {},
		computed: {
			dataRule() {
				return {
					name: [{
							required: true,
							message: '模板名称不能为空!',
							trigger: ['blur','change']
						}
					],
					applet_id: [{
						required: true,
						message: '请选择小程序！',
						trigger: ['blur','change']
					}],
					ipu_qualify:[{
						required: true,
						message: '请填写首日广告展示数',
						trigger: ['blur','change']
					}],
					arpu_num:[{
						required: true,
						message: '请填写首日广告金额',
						trigger: ['blur','change']
					}]
				}
			}
		},
		watch:{
		},
		methods: {
			closeFn(){
				this.$refs.dataForm.resetFields();
				this.dataForm.recharge_template_type = 1;
				this.dataForm.recharge_template_id = '';
			},
			clearCompanyFn(){
				this.dataForm.applet_id = '';
				this.dataForm.ad_type = 1;
				this.dataForm.backhaul_dimension = 1;
				this.dataForm.report_method = 1;
				this.dataForm.user_activation_report = 1;
				this.dataForm.report_type = 1;
				this.dataForm.backhaul_type = 1;
				this.dataForm.minimun_report_amount = '';
				this.dataForm.backhaul_filterate_num = '';
				this.dataForm.backhaul_filterate_miss = '';
				this.dataForm.start_protect = '';
			},
			//小程序列表
			async getAppletFn(){
				const appletRes = await this.$axios.get(`/api/delivery/company/getApplet`);
				console.log(appletRes);
				if(Array.isArray(appletRes)){
					if(appletRes.length){
						appletRes.forEach(item=>{
							if(item.value == this.dataForm.applet_id){
								this.Applettype = item.type  
							}
						})
						this.appletList = appletRes;
						return;
					}
				}
				this.appletList = [];
			},

			changeAppletFn(e){
				console.log(266)
				this.dataForm.operation_mode = 1
				let appletList = this.appletList;
				appletList.forEach(item=>{
					if(item.value == e){
						this.Applettype = item.type  
					}
				})
				
				console.log(253,this.Applettype )
			},
			changeOperationFn(e){
				console.log(277)
				this.dataForm.ipu_qualify = ''
				this.dataForm.arpu_num = ''
			},
			//投放平台列表
			async getPlatformFn(init=true){
				const platformIdRes = await this.$axios.get('/api/common/platform');
				console.log(platformIdRes);
				if(Array.isArray(platformIdRes)){
					if(platformIdRes.length){
						this.platformId = platformIdRes;
						if(!init&&!this.dataId){
							this.dataForm.spread_platform_id = platformIdRes[0].value;
						}
						return;
					}
				}
				this.platformId = [];
				this.dataForm.spread_platform_id = "";
			},
			init() {
				this.getPlatformFn(false);
				setTimeout(()=>{
					this.visible = true;
					this.$nextTick(() => {
						setTimeout(()=>{
							this.$refs.dataForm.resetFields();
						},200)
					})
				},80)
			},
			update(row) {
				this.getPlatformFn(false);
				setTimeout(()=>{
					this.visible = true;
					this.$nextTick(() => {
						this.$refs.dataForm.resetFields();
						this.dataForm = Object.assign({}, row);
						this.getAppletFn();
					})
				},80)
			},
			// 表单提交
			dataFormSubmitHandle: debounce(function() {
				console.log('表单提交');
				this.$refs.dataForm.validate((valid) => {
					console.log(valid + '--+++++-----------')
					if (!valid) {
						return false
					}
					console.log(this.dataForm);
					this.$axios.post(this.dataId?`/api/delivery/dataBackhaulSetting/update/${this.dataId}`:'/api/delivery/dataBackhaulSetting/create', this.dataForm).then(res => {
						this.$message({
							message: this.$t('views.public.success'),
							type: 'success',
							duration: 500,
							onClose: () => {
								this.visible = false;
								this.$emit('refreshDataList',this.dataId?false:true);
							}
						})
					}).catch(() => {})
				})
			}, 1000, {
				leading: true,
				trailing: false
			})
		}
	}
</script>

<style lang="scss" scoped>
	.form{
		width: 600px;
	}
	:deep(.el-dialog__body){
		padding: 20px 20px 0px 20px!important;
	}
</style>